<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>欢迎页</title>
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="/js/plugins/openlayer/ol.css" type="text/css">
 <style>
         html,body{margin:0px;padding:0px;height: 100%;font-size:12px}
        #map{
            height: 800px;
            width: 100%;
            background: #ccc;
            cursor: default;
            clear: both;
            position: relative;
        }
         
    </style>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
</head>
<body>
	<div class="panel panel-default">
		<div class="panel-heading">关于 天网系统</div>
		<!-- <div style="padding: 10px 0 20px 20px;">
			<h1>简介</h1>
			<p>天网系统</p>

			<h2>定位</h2>
			<ul>
				<li>维护社会稳定</li>
				<li>人民生活安康</li>
				<li>社会风气和谐</li>
			</ul> 
			<h2>简单使用说明</h2>
			<ol>
				<li>为人民服务</li> 
			</ol>
		</div> -->
		<div id="map" class="map">
		    <div style="position:absolute;bottom:50px;left:15px;z-index:100;line-height:23px; background-color:#ffd800;width:300px;height:30px;"
		     id="location"></div> 
		     
		</div> 
		 
		<div id="popup" class="ol-popup">
	        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
	        <div id="popup-title" class="popup-title"></div>
	        <div id="popup-content" class="popup-content"></div>
	    </div>
		 
	</div>
</body>
<div th:include="include::footer"></div>
<script src="/js/plugins/openlayer/ol.js"></script> 
<!-- <script type="text/javascript" src="/js/appjs/camera/mapHelper.js"></script> 
<script type="text/javascript" src="/js/appjs/camera/manage.js"></script> -->
<script type="text/javascript">
 	//默认中心点
    var c = ol.proj.transform([118.95632939373546, 42.294237816899766], 'EPSG:4326', 'EPSG:3857');
    //初始化地图
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    //   url:'http://www.google.cn/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}'
                    //    url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
                    //     url:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&x={x}&y={y}&z={z}'
                    //  url:'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
                    //         url:'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
                   //url:'http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}'
                	   // url:'http://192.168.0.100/mapServer1/{z}/{x}/{y}.jpg'
                	//可以自行下载地图瓦片进行内网部署
                   url:'http://mt2.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
                }) 
            })
        ],

        view: new ol.View({
            center: c,
            zoom: 15,
            maxZoom: 21,
            minZoom: 1,
        }),
        interactions:new ol.interaction.defaults({
         	doubleClickZoom:false,   //屏蔽双击放大事件
        })

    }); 
    
    var overlays = {}; 
    function createOrverLay(map,id,coordinate,title,content){
		 
		if(document.getElementById("my_"+id)){
			return ;
		}
		var overDiv=document.createElement("div"); 
		overDiv.style="height:350px;width:350px;border-color: #00b5ff;block-size: 10px;";
    	overDiv.setAttribute("id","my_"+id);
    	overDiv.innerHTML="<h1 onclick='closeDiv("+id+");' style='background-color: #f2f2f2;position:absolute;margin-left: 310px;'>X</h1><iframe scrolling = 'no' style='height:250px;width:350px' src='video/viewMain/"+id+"'></iframe>"
    	document.body.appendChild(overDiv);  
    	
    	var overlay = new ol.Overlay({
            element: overDiv,
            autoPan:true,
            autoPanMargin:100,
            stopEvent:false, //true如果在 overlay 之上滚动滚轮，并不会触发缩放事件
            positioning:'top-left',
            insertFirst:true
        }); 
    	overlays["my_"+id] = overlay; 
        map.addOverlay(overlay);
       // map.removeOverlay(overlay);
        overlay.setPosition(coordinate);
        return overlay;
    } 
    
    function closeDiv(id){
    	map.removeOverlay(overlays["my_"+id]); 
    }
    
   //添加鼠标移动坐标显示
   var c1 = new ol.control.MousePosition({ 
       target:document.getElementById("location"),
       //coordinateFormat:ol.coordinate.createStringXY(100), 
       //coordinateFormat: ol.coordinate.createStringXY(4),      // 将坐标保留4位小数位，并转换为字符串
       projection: 'EPSG:4326',                                // 定义投影
       className: 'custom-mouse-position',                     // 控件的CSS类名
       target: document.getElementById('location'),      // 将控件渲染在该DOM元素中
       undefinedHTML: '&nbsp;'                                 // 鼠标离开地图时，显示空格 
   }) 
   map.addControl(c1);
   /* map.on("click",function(evt){
       console.log(evt);
       console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857','EPSG:4326'));
       //map.addOverlay(new cser.gmarker({position:evt.position,icon:new cser.icon({src:'marker.png',anchor:[0.5, 34],size:[20,34]}),
       //label:new cser.text({text:"测试",size:"14px",font:'宋体',offset:[0,10]}),draggable:true}));
   }); */
   //添加地图点击事件
   map.on("click",function(evt){
       //layer.msg("加载数据中，请稍后"); 
       mapClick(evt);
   });
   //鼠标双击
   map.on("dblclick", function () {
	   console.log("=-----");
	   return ;
       //鼠标停止移动
       //initVector({ map: map});
   });
 
 
   //加载地图上标记的摄像头
   initFourCornersHotArea(map); 
   
   function initFourCornersHotArea(map) {
        //根据地图可视范围大小计算地图四个顶点坐标
        var bbox = map.getView().calculateExtent(map.getSize());
        //查询可视范围内标注的坐标
        $.ajax({
            url:  '/video/hotArea/fourCorners/',
            method: 'GET',
            data: {
                minX: bbox[0], minY: bbox[1], maxX: bbox[2], maxY: bbox[3]
            },
            success: function (response) { 
            	console.log(response.code);
                if (response.code == 0) {  
             	   var features = []; 
             	  console.log(response.data);
             	   $.each(response.data, function (index, dda) {
                        var val = response.data[index];
                        
                        var startMarker = new ol.Feature({
                				type : 'cctv', 
                				geometry : new ol.geom.Point([val.lat,val.lng]),
                				id :val.id 
                			}); 
                        startMarker.setStyle( new ol.style.Style({
                    		image : new ol.style.Icon({
                    			anchor : [ 0.7, 0.7 ],
                    			src : '/images/cctv.png'
                    		}),
                    		text: new ol.style.Text({
                                // 字体与大小
                                font: '13px Microsoft YaHei',
                                //文字填充色
                                fill: new ol.style.Fill({
                                    color: '#666'
                                }),
                                //文字边界宽度与颜色
                                stroke: new ol.style.Stroke({
                                    color: '#fff',
                                    width: 3
                                }),
                                // 显示文本，数字需要转换为文本string类型！
                                text: "" + val.name + "",
                                offsetY: -15
                            }) 
                        
                    	}));
                        features.push(startMarker);
                    }); 
             	   var vectorLayer = new ol.layer.Vector({
             			source : new ol.source.Vector({
             				features : features
             			}), 
             		});
             		map.addLayer(vectorLayer);   
                }
            },
            failure: function () {
            }
       });
    }  
    //鼠标点击事件
    function mapClick(evt){
	    var pixel = map.getEventPixel(evt.originalEvent); 
	    //只有地图pixel范围内有feature的才会有数据，feature就是自己加载的摄像头点或者其他
        var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
            return feature;
        });   
        if (feature != null) {
            //feature 中的type是自己按业务设置的
            if (feature.getProperties()["type"] == "cctv") {
                var oid = feature.get('id'); 
				console.log(oid);
				console.log(evt);
				var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
			    var info='<p>You clicked here:</p><code>' + hdms + '</code>';
		 
				//showinfo(evt.coordinate,info);
				createOrverLay(map,oid,evt.coordinate,"1",info)
            } 
        } else {
            //if (popup != null) {
            //    $(popup.getElement()).popover('destroy');
            //}
        }
	     
	}
    function showinfo(coordinate,info) {
        content.html(info) ;
        container.show();
        title.html("提示信息");
        title.show();
        overlay.setPosition(coordinate);
    } 
</script>
</html>